<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <title>Clipboard</title>
  </head>
  <body>
    <!-- Hero -->
    <section id="hero">
      <div class="section-container mb-40 pt-16">
        <img src="/images/logo.svg" alt="LOGO" class="mx-auto my-16" />

        <h3>你的任何拷贝历史</h3>
        <p class="content-2xl mb-10">
          Clipboard 允许你跟踪及组织你所做的任何拷贝。
          在你的所有设备之间实时访问。
        </p>

        <!-- 按钮容器 -->
        <div class="btn-container">
          <a
            href=""
            class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80"
            >下载 iOS 版</a
          >
          <a
            href=""
            class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80"
            >下载 Mac 版</a
          >
        </div>
      </div>
    </section>
    <!-- Snippets -->
    <section id="snippets">
      <div class="section-container my-20">
        <h3>跟踪你的片段</h3>
        <p class="content mb-24">
          Clipboard
          立即将您复制的任何项目存储在云中，这意味着您可以立即在所有设备上访问您的片段。
          我们的 Mac 和 iOS 应用程序将帮助您整理一切。
        </p>
      </div>
    </section>
    <!-- features -->
    <section id="features">
      <div class="section-container my-20">
        <div class="flex flex-col md:flex-row md:space-x-2 relative">
          <!-- 图片 -->
          <div class="md:w-1/2">
            <img
              src="/images/image-computer.png"
              alt=""
              class="md:absolute top-0 right-[50%]"
            />
          </div>
          <!-- 项目容器 -->
          <div
            class="flex flex-col mt-16 mb-24 space-y-12 text-xl md:w-1/2 md:mb-60 md:text-left md:pl-16"
          >
            <!-- 项目1 -->
            <div>
              <h5>快速搜索</h5>
              <p class="max-w-md text-grayishBlue">
                按内容、类别、网址、应用程序等轻松搜索您的片段。
              </p>
            </div>
            <!-- 项目2 -->
            <div>
              <h5>iCloud 云同步</h5>
              <p class="max-w-md text-grayishBlue">
                在您的所有设备上即时保存和同步片段。
              </p>
            </div>
            <!-- 项目3 -->
            <div>
              <h5>完整的历史</h5>
              <p class="max-w-md text-grayishBlue">
                从您开始使用该应用程序的第一刻起检索任何片段。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- access anywhere -->
    <section id="access">
      <div class="section-container my-20">
        <h3>随时随地访问 Clipboard</h3>
        <p class="content mb-24">
          无论您是在旅途中还是在您的计算机上，只需单击几下即可访问所有 Clipboard
          片段。
        </p>
        <img src="/images/image-devices.png" alt="" class="mx-auto" />
      </div>
    </section>
    <!-- supercharge -->
    <section id="supercharge">
      <div class="section-container my-20">
        <h3>增强你的工作流</h3>
        <p class="content mb-16">我们拥有提高你的生产力的工具。</p>
        <!-- 项目容器 -->
        <div
          class="flex flex-col items-center justify-between space-y-16 md:flex-row md:space-y-0 md:space-x-12"
        >
          <!-- 项目1 -->
          <div class="flex flex-col items-center space-y-5">
            <img src="/images/icon-blacklist.svg" alt="" class="mb-6" />
            <h5>创建黑名单</h5>
            <p class="max-w-md text-grayishBlue">
              按内容、类别、网址、应用程序等轻松搜索您的片段。
            </p>
          </div>
          <!-- 项目2 -->
          <div class="flex flex-col items-center space-y-5">
            <img src="/images/icon-text.svg" alt="" class="mb-6" />
            <h5>纯文本片段</h5>
            <p class="max-w-md text-grayishBlue">
              从复制的文本中删除不需要的格式以获得一致的外观。
            </p>
          </div>
          <!-- 项目3 -->
          <div class="flex flex-col items-center space-y-5">
            <img src="/images/icon-preview.svg" alt="" class="mb-6" />
            <h5>先睹为快</h5>
            <p class="max-w-md text-grayishBlue">
              快速预览 Clipboard 上的所有片段以便于访问。
            </p>
          </div>
        </div>
      </div>
    </section>
    <!-- references -->
    <section id="references">
      <div
        class="flex flex-col items-center justify-between max-w-6xl px-10 mx-auto space-y-16 my-44 md:flex-row md:space-y-0"
      >
        <img src="/images/logo-google.png" alt="" />
        <img src="/images/logo-ibm.png" alt="" />
        <img src="/images/logo-microsoft.png" alt="" />
        <img src="/images/logo-hp.png" alt="" />
        <img src="/images/logo-vector-graphics.png" alt="" />
      </div>
    </section>
    <!-- bottom -->
    <section id="bottom">
      <div class="section-container my-20">
        <h3>iOS 和 MacOS 版 Clipboard</h3>
        <p class="content mb-10">
          可在 App Store 免费获取。下载 Mac 或 iOS 版，使用 iCloud
          同步，然后您就可以开始使用 Clipboard 了。
        </p>
        <!-- 按钮容器 -->
        <div class="btn-container">
          <a
            href=""
            class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80"
            >下载 iOS 版</a
          >
          <a
            href=""
            class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80"
            >下载 Mac 版</a
          >
        </div>
      </div>
    </section>
    <footer>
      <div class="section-container">
        <div class="flex flex-col items-center justify-between md:flex-row">
          <!-- 图片 -->
          <img src="/images/logo.svg" alt="" class="scale-50" />
          <!-- 菜单和社交容器 -->
          <div
            class="flex flex-col items-center justify-between flex-1 mb-10 space-y-6 md:flex-row md:mb-0 md:space-y-0 text-grayishBlue"
          >
            <!-- 菜单 -->
            <div
              class="flex flex-col space-y-4 md:flex-row md:ml-24 md:space-x-24 md:space-y-0"
            >
              <!-- 菜单1 -->
              <div class="flex flex-col space-y-4 text-center md:text-left">
                <div><a href="" class="hover:text-strongCyan">常见问题</a></div>
                <div><a href="" class="hover:text-strongCyan">联系我们</a></div>
              </div>
              <!-- 菜单2 -->
              <div class="flex flex-col space-y-4 text-center md:text-left">
                <div><a href="" class="hover:text-strongCyan">隐私策略</a></div>
                <div><a href="" class="hover:text-strongCyan">新闻资料</a></div>
              </div>
              <!-- 菜单3 -->
              <div class="flex flex-col space-y-4 text-center md:text-left">
                <div><a href="" class="hover:text-strongCyan">安装向导</a></div>
              </div>
            </div>
            <!-- 社交图标 -->
            <div class="flex justify-between w-32 py-1">
              <a href=""
                ><img
                  src="/images/icon-facebook.svg"
                  alt=""
                  class="duration-200 ficon"
              /></a>
              <a href=""
                ><img
                  src="/images/icon-twitter.svg"
                  alt=""
                  class="duration-200 ficon"
              /></a>
              <a href=""
                ><img
                  src="/images/icon-instagram.svg"
                  alt=""
                  class="duration-200 ficon"
              /></a>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <script type="module" src="/main.js"></script>
  </body>
</html>
